<script setup lang="ts">
import { Title } from '../Title';
defineProps({
    title: {
        type: String,
        default: '',
    },
    content: {
        type: String,
        default: '',
    },
    showTitle: {
        type: Boolean,
        default: true,
    },
    buttonText: {
        type: String,
        default: 'View All Custom Products',
    },
    url: {
        type: String,
        default: '',
    },
    pageUrl: {
        type: String,
        default: '',
    },
});
</script>

<template>
    <div>
        <section class="relative w-full text-center mx-auto" style=""><!---->
            <div class="relative">
                <Title :title="title" class="md:w-[70%] mx-auto">
                    <template #content>
                        <div>
                            {{ content }}
                        </div>
                    </template>
                </Title>
                <div class="flex flex-col  max-md:flex-wrap justify-center items-center">
                    <div class="w-full flex-1 text-center flex items-center p-2 md:p-3">
                        <div class="w-full">
                            <div class="cms-img relative w-full">
                                <div class=" absolute inset-0 hidden">
                                    <div class=" h-full w-full" style="max-width: 600px"></div>
                                </div>
                                <div class="image-content relative w-full">
                                    <div class="absolute inset-0">
                                        <div class="glow1 mx-auto mt-auto h-auto" style="max-width:600px;"></div>
                                    </div>
                                    <div class="absolute inset-0 flex items-end justify-end">
                                        <div class="glow2 mx-auto mt-auto h-auto" style="max-width:600px;"></div>
                                    </div>
                                    <img alt="tigers" sizes="87.6923076923077vw" :src="url" class="w-[100%]" style=""
                                        fetchpriority="auto" loading="lazy" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="w-full">
                        <v-btn elevation="0" color="#39c464" class="w-full! mt-4 text-white max-w-[400px]!"
                            :href="pageUrl" target="_blank">
                            {{ buttonText }}
                        </v-btn>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>